import React, {useState, useRef, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {getPage, updateApp,del} from './service';
import "./index.css";
import {Button, Input, message, Modal, Select} from "antd";
import Access from "@/components/Access/Access";
import {PlusOutlined} from "@ant-design/icons";
import CreateForm from "./components/CreateForm";
import styles from "@/global.less";

const TableList = (props) => {
  const actionRef = useRef();
  const [count, setCount] = useState();
  const [createModalVisible, handleModalVisible] = useState(false);
  const [formValues, setFormValues] = useState({});
  useEffect(() => {
  }, []);

  const columns = [
    {
      title: '业务类型',
      dataIndex: 'bizType',
      valueEnum: {
        1: {
          text: '化肥统采申请流程',
          status: 'Success',
        },
        5: {
          text: '超市统采申请流程',
          status: 'Success',
        },
        3: {
          text: '统采运费付款流程',
          status: 'Success',
        },
        2: {
          text: '地采申请流程',
          status: 'Success',
        },
        4: {
          text: '地采付款申请流程',
          status: 'Success',
        },
        10: {
          text: '原料预付货款采购流程',
          status: 'Success',
        },
        11: {
          text: '原料先货后款采购流程',
          status: 'Success',
        },
        12: {
          text: '原料账期付款采购流程',
          status: 'Success',
        },
        20: {
          text: '原料预付货款付款流程',
          status: 'Success',
        },
        21: {
          text: '原料先货后款付款流程',
          status: 'Success',
        },
        22: {
          text: '原料账期付款付款流程',
          status: 'Success',
        },
        23: {
          text: '原料先款后货付款流程',
          status: 'Success',
        },
        7: {
          text: '原料入库审批流程',
          status: 'Success',
        },
        8: {
          text: '原料出库审批流程',
          status: 'Success',
        },
        9: {
          text: '原料运费审批流程',
          status: 'Success',
        },
        101: {
          text: '化肥直销申请流程',
          status: 'Success',
        },
        102: {
          text: '商超直销申请流程',
          status: 'Success',
        },
        6: {
          text: '直销运费付款申请流程',
          status: 'Success',
        },
        30: {
          text: '成品入库申请流程',
          status: 'Success',
        },
        41: {
          text: '化肥退货(退回工厂)申请流程',
          status: 'Success',
        },
        42: {
          text: '商超退货(退回工厂)申请流程',
          status: 'Success',
        },
        51: {
          text: '化肥退货(自行处理)申请流程',
          status: 'Success',
        },
        52: {
          text: '商超退货(自行处理)申请流程',
          status: 'Success',
        },
      },
      renderFormItem: (item, { defaultRender, ...rest }, form) => {
        return (
          <Select defaultValue={defaultRender.bizType} placeholder="请选择业务类型" allowClear>
            <Select.Option value={1}>化肥统采申请流程</Select.Option>
            <Select.Option value={5}>超市统采申请流程</Select.Option>
            <Select.Option value={3}>统采运费付款流程</Select.Option>
            <Select.Option value={2}>地采申请流程</Select.Option>
            <Select.Option value={4}>地采采购付款流程</Select.Option>

            <Select.Option value={10}>原料预付货款采购流程</Select.Option>
            <Select.Option value={11}>原料先货后款采购流程</Select.Option>
            <Select.Option value={12}>原料账期付款采购流程</Select.Option>

            <Select.Option value={20}>原料预付货款付款流程</Select.Option>
            <Select.Option value={21}>原料先货后款付款流程</Select.Option>
            <Select.Option value={22}>原料账期付款付款流程</Select.Option>
            <Select.Option value={23}>原料先款后货付款流程</Select.Option>

            <Select.Option value={7}>原料入库审批流程</Select.Option>
            <Select.Option value={8}>原料出库审批流程</Select.Option>
            <Select.Option value={9}>原料运费审批流程</Select.Option>

            <Select.Option value={101}>化肥直销申请流程</Select.Option>
            <Select.Option value={102}>商超直销申请流程</Select.Option>
            <Select.Option value={6}>直销运费付款申请流程</Select.Option>

            <Select.Option value={30}>成品入库申请流程</Select.Option>

            <Select.Option value={41}>化肥退货(退回工厂)申请流程</Select.Option>
            <Select.Option value={42}>商超退货(退回工厂)申请流程</Select.Option>
            <Select.Option value={51}>化肥退货(自行处理)申请流程</Select.Option>
            <Select.Option value={52}>商超退货(自行处理)申请流程</Select.Option>
          </Select>
        );
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '业务类型必填项',
          },
        ],
      },
    },
    {
      title: '节点类型',
      dataIndex: 'appType',
      valueEnum: {
        1: {
          text: '审批人',
          status: 'Error',
        },
        2: {
          text: '抄送人',
          status: 'Error',
        },
      },
      renderFormItem: (item, { defaultRender, ...rest }, form) => {
        return (
          <Select defaultValue={defaultRender.appType} placeholder="请选择节点类型" allowClear>
            <Select.Option value={1}>审批人</Select.Option>
            <Select.Option value={2}>抄送人</Select.Option>
          </Select>
        );
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '节点类型必填项',
          },
        ],
      },
    },
    {
      title: '账号类型',
      dataIndex: 'flagType',
      valueEnum: {
        1: {
          text: '企业微信账号',
          status: 'Processing',
        },
        2: {
          text: '店铺归属内勤',
          status: 'Processing',
        },
        3: {
          text: '店铺归属县总',
          status: 'Processing',
        },
        4: {
          text: '店铺归属区总',
          status: 'Processing',
        },
        5: {
          text: '店铺归属会计',
          status: 'Processing',
        },
      },
      renderFormItem: (item, { defaultRender, ...rest }, form) => {
        return (
          <Select defaultValue={defaultRender.flagType} placeholder="请选择账号类型" allowClear>
            <Select.Option value={1}>企业微信账号</Select.Option>
            <Select.Option value={2}>店铺归属内勤</Select.Option>
            <Select.Option value={3}>店铺归属县总</Select.Option>
            <Select.Option value={4}>店铺归属区总</Select.Option>
            <Select.Option value={5}>店铺归属会计</Select.Option>
          </Select>
        );
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '账号类型必填项',
          },
        ],
      },
    },
    {
      title: '企业微信',
      dataIndex: 'approved',
      hideInSearch:true
    },
    {
      title: '序号',
      dataIndex: 'appSort',
      hideInSearch:true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '序号必填项',
          },
        ],
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => {
        return (
          <>
            <div style={{
              display: "flex",
              overflow: "hidden"
            }}>
              <Access accessKey={"@approved_update"}>
                <Button
                  type="primary"
                  style={{
                    marginLeft: "10px"
                  }}
                  onClick={() => {
                    setFormValues(record);
                    handleModalVisible(true);
                  }}
                >
                  修改
                </Button>
              </Access>
              <Access accessKey={"@approved_del"}>
                <Button
                  type="primary"
                  danger
                  style={{
                    marginLeft: "10px"
                  }}
                  onClick={() => {
                    Modal.confirm({
                      title: '注意',
                      content: '确认要删除此审批节点吗',
                      onOk() {
                        del(record).then(res=>{
                          if (res?.code === 0)message.success("删除成功")
                          actionRef.current.reload();
                        })
                      },
                      onCancel() {},
                    });
                  }}
                >
                  删除
                </Button>
              </Access>
            </div>
          </>
        );
      },
    },

  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="审批账号列表"
        actionRef={actionRef}
        rowKey="id"
        scroll={{x: 1400}}
        bordered
        request={(params, sorter, filter) => getPage({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        toolBarRender={() => [
          <Access accessKey={"@approved_add"}>
            <Button
              key="approved_add"
              type="primary"
              onClick={() => {
                formValues.id = null;
                setFormValues(Object.assign(formValues));
                handleModalVisible(true);
              }}
            >
              <PlusOutlined/> 新建节点
            </Button>
          </Access>
          ,

        ]}

        columns={columns}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: false,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
      />
      <CreateForm
        title="节点信息"
        onCancel={() => {
          handleModalVisible(false);
        }}
        modalVisible={createModalVisible}
        width={800}
        btn_view={null}
      >
        <ProTable
          className={styles.formModal}
          onSubmit={async (value) => {
            if (formValues){
              value.id = formValues.id;
            }
            updateApp(value).then(res=>{
              handleModalVisible(false);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            });
          }}
          rowKey="id"
          bordered
          type="form"
          form={{
            layout: 'horizontal ',
            labelAlign: 'rihgt',
            labelCol: {span: 8},
            wrapperCol: {span: 24},
            initialValues: formValues
          }}
          columns={columns}
        />
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
